<template>
	<view>

		<template v-if="info.apply_for.count > 0">
			<view class="message">
				<view class="message-list">
					<view class="message-list-header">
						<view class="message-list-header-l">
							<image :src="ossUrl + `/static/card/4.png` " mode=""></image>
							入圈申请
						</view>
						<view class="message-list-header-r" @click="goapply(1)">
							新请求 <text class="text"><u-badge max="99" :value="info.apply_for.count"
									bgColor="#D91515"></u-badge></text>
							<image :src="ossUrl + `/static/card/12.png`" mode=""></image>
						</view>
					</view>
					<view class="message-list-content">
						<image class="message-list-content-avatar" :src="info.apply_for.apply_for.head"
							@click="toIndexOther(info.apply_for.apply_for.id)"></image>
						<view class="message-list-content-r">
							<view class="message-list-content-r-tx">
								<view class="message-list-content-r-name">{{ info.apply_for.apply_for.nickname || '' }}
								</view>
								<picker mode="selector" :range="selectList" @change="confirm">
									<view class="message-list-content-r-tx-address flex-row">
										{{ identity || '' }}
										<u-icon name="arrow-down-fill" size="12"></u-icon>
									</view>
								</picker>

							</view>
							<view class="message-list-content-r-btns">
								<view class="message-list-content-r-btns-agree" @click="agree">同意</view>
								<view class="message-list-content-r-btns-rej" @click="reject">拒绝</view>
							</view>
						</view>
					</view>

				</view>
			</view>
		</template>
		<template v-if="info.circle_view.count > 0">
			<view class="message">
				<view class="message-list">
					<view class="message-list-header">
						<view class="message-list-header-l">
							<image :src="ossUrl + `/static/card/4.png` " mode=""></image>
							视频申请
						</view>
						<view class="message-list-header-r" @click="goapply(2)">
							新请求 <text class="text"><u-badge max="99" :value="info.circle_view.count"
									bgColor="#D91515"></u-badge></text>
							<image :src="ossUrl + `/static/card/12.png`" mode=""></image>
						</view>
					</view>
					<view class="message-list-content">
						<image class="message-list-content-avatar" :src="info.circle_view.arr.head"
							@click="toIndexOther(info.circle_view.arr.b_id)"></image>
						<view class="message-list-content-r">
							<view class="message-list-content-r-tx">
								<view class="message-list-content-r-name">{{ info.circle_view.arr.nickname || '' }}
								</view>
								<view class="message-list-content-r-tx-address flex-row">
									{{ info.circle_view.arr.identity || '' }}
									<!-- <u-icon name="arrow-down-fill" size="12"></u-icon> -->
								</view>
							</view>
							<view class="message-list-content-r-btns">
								<view class="message-list-content-r-btns-agree"
									@click="agreeCircle(info.circle_view.arr)" style="padding: 0 20rpx;">查看申请列表</view>
								<view class="message-list-content-r-btns-rej"
									@click="rejectCircle(info.circle_view.arr)">拒绝</view>
							</view>
						</view>
					</view>

				</view>
			</view>
		</template>
		<template v-if="info.certificate.count > 0">
			<view class="message">
				<view class="message-list">
					<view class="message-list-header">
						<view class="message-list-header-l">
							<image :src="ossUrl + `/static/card/4.png` " mode=""></image>
							 证书申请
						</view>
						<view class="message-list-header-r" @click="goapply(3)">
							新请求 <text class="text"><u-badge max="99" :value="info.certificate.count"
									bgColor="#D91515"></u-badge></text>
							<image :src="ossUrl + `/static/card/12.png`" mode=""></image>
						</view>
					</view>
					<view class="message-list-content">
						<image class="message-list-content-avatar" :src="info.certificate.arr.head"
							@click="toIndexOther(info.certificate.arr.b_id)"></image>
						<view class="message-list-content-r">
							<view class="message-list-content-r-tx">
								<view class="message-list-content-r-name">{{ info.certificate.arr.nickname || '' }}
								</view>
								<view class="message-list-content-r-tx-address flex-row">
									{{ info.certificate.arr.identity != '无' ? info.certificate.arr.identity || '' : '' }}
									<!-- <u-icon name="arrow-down-fill" size="12"></u-icon> -->
								</view>
							</view>
							<view class="message-list-content-r-btns">
								<view class="message-list-content-r-btns-agree"
									@click="agreeCertificate(info.certificate.arr)">同意</view>
								<view class="message-list-content-r-btns-rej"
									@click="rejectCertificate(info.certificate.arr)">拒绝</view>
							</view>
						</view>
					</view>

				</view>
			</view>
		</template>
		<view class="list">
			<view class="list-item" v-for="it in value" :key="it.user_id">
				<u-swipe-action>
					<u-swipe-action-item :options="userInfo.circle_type != 1 ? setOptions(it.Is_it_displayed) : options"
						@click="handleClick" :threshold='60' :name="it">
						<view class="cell flex-row">
							<image :src="it.head" class="avatar" @click="toIndexOther(it.b_id)"></image>
							<view class="flex-1">
								<view class="text1">
									<view>{{it.nickname}}</view>
								</view>
								<picker mode="selector" :range="selectList" @change="e => setIdentity(e, it)">
									<view class="text2 ">
										<view class="flex-row">
											<view>
												{{it.identity || ''}}
											</view>
											<view style="margin-left: 5rpx;"><u-icon name="arrow-down-fill"
													size="12"></u-icon></view>
										</view>
									</view>
								</picker>
								<view class="text2">
									<view>总分享数：{{it.total_sharing || 0}}次</view>
								</view>
								<view class="intro">
									名片夹人数：{{it.number_of_friends || 0}}人
								</view>
								<view class="intro" v-if="it.time" style="margin-top: 10rpx;">
									入圈到期时间：<text style="color: #19be6b;">{{it.time ? it.time.split(' ')[0] : ''}}</text>
								</view>
							</view>
							<view class="text3">
								<view style="color: #cdcdcd;">{{it.add_time || ''}}</view>
								<view>日分享数：{{it.daily_sharing || 0}}次</view>
							</view>
						</view>
					</u-swipe-action-item>
				</u-swipe-action>
			</view>

		</view>
		<view class="painter">
			<l-painter :board="board" style="width: 100%;height: 100%;" ref="painterRef" />
		</view>
	</view>
</template>

<script>
	import Swiper from '../interestManage/swiper.vue';
	import {
		circle_member_list_operate,
		circle_view_status,
		agree_certificate,
		refuse_certificate
	} from '@/common/http/api.js'
	import {
		getCertificatePainter
	} from './config'
	import {
		ossUpload,
		ossDel
	} from '@/common/oss.js'
	export default {
		components: {
			Swiper
		},
		props: {
			value: {
				type: Array,
				default: () => []
			},
			info: {
				type: String | Object
			},
			userInfo: {
				type: Object
			}
		},
		data() {
			return {
				show: true,
				selectList: [],
				options: [{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					},

				],
				identity: '',
				board: {}
			}
		},
		watch: {
			info: {
				handler(val) {
					console.log('val', val)
					this.selectList = val.identity.map(i => i.name)
					if (val.apply_for.count > 0) {
						this.identity = val.apply_for.apply_for.identity
					}

				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			goapply(e){
				uni.navigateTo({
					url:"/pagesA/circleManage/circleApply?type="+e+'&id='+this.userInfo.circle_id
				})
			},
			agreeCertificate(it) {
				console.log('同意', it)
				uni.showLoading({
					title: '请求中...',
					mask: true
				})
				this.board = getCertificatePainter(it)
				console.log('this.board', this.board)
				setTimeout(() => {
					this.$nextTick(() => {
						console.log('canvasToTempFilePathSync', this.$refs.painterRef)
						this.$refs.painterRef.canvasToTempFilePathSync({
							fileType: "jpg",
							// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
							pathType: 'url',
							quality: 1,
							success: (res) => {
								console.log(res.tempFilePath);
								// 非H5 保存到相册
								// H5 提示用户长按图另存
								ossUpload(res.tempFilePath, false).then(res => {
									console.log('ossUpload', res)
									let data = {
										certificate: res.url,
										id: it.id
									}
									agree_certificate(data).then(res => {
										uni.hideLoading()
										uni.$u.toast('已同意！')
										this.$emit('reload')
									})
								})
							},
							fail: (err) => {
								console.log('err', err)
								uni.hideLoading()
								uni.$u.toast('生成失败！请稍后再试')
							}
						});
					})
				}, 200)
			},
			rejectCertificate(it) {
				console.log('拒绝', it)
				uni.showLoading({
					title: '请求中...',
					mask: true
				})
				let data = {
					id: it.id
				}
				refuse_certificate(data).then(res => {
					uni.hideLoading()
					uni.$u.toast('已拒绝！')
					this.$emit('reload')
				})
			},
			toIndexOther(id) {
				uni.navigateTo({
					url: '/pages/index/other?isBackHome=2&shareId=' + id
				})
			},
			rejectCircle(row) {
				wx.showModal({
					// title: `拒绝`,
					editable: true, // 允许输入
					placeholderText: '拒绝原因', // 输入框提示
					confirmText: '拒绝',
					confirmColor: '#e4393c',
					success: res => {
						if (res.confirm) {
							// 用户点击确定，res.content 是输入的内容
							console.log('用户输入:', res.content)

							if (res.content) {
								uni.showLoading({
									mask: true
								})
								circle_view_status({
									id: row.id,
									status: 2,
									prompt: res.content
								}).then(res => {
									uni.hideLoading()
									this.$u.toast('已拒绝')
									this.$emit('reload')
								})
							} else {
								this.$u.toast('请输入拒绝原因！')
							}
						} else if (res.cancel) {
							// 用户点击取消
							console.log('用户取消输入')
						}
					}
				})

			},
			agreeCircle(row) {
				uni.navigateTo({
					url: '/pagesA/circleManage/audit/form?circle_id=' + row.circle_id + '&id=' + row.id
				})
			},
			setIdentity(e, it) {
				console.log(e, it)
				uni.showLoading({
					mask: true
				})
				circle_member_list_operate({
					type: 4,
					identity: this.selectList[e.detail.value],
					b_id: it.b_id
				}).then(res => {
					uni.hideLoading()
					// this.$u.toast('删除成功')
					this.$emit('reload')
				})
			},
			setOptions(e) {
				if (e === 0) {
					return [{
						text: '展示',
						style: {
							backgroundColor: '#b1b1b1'
						}
					}, ...this.options]
				} else {
					return [{
						text: '不展示',
						style: {
							backgroundColor: '#b1b1b1'
						}
					}, ...this.options]

				}
			},
			handleClick(e) {
				console.log(e, e.index);
				if (this.userInfo.circle_type != 1) {
					if (e.index === 1) {
						uni.showModal({
							title: '',
							content: '请确认是否删除？',
							showCancel: true,
							cancelText: '取消',
							confirmText: '确认',
							confirmColor: '#E4393C',
							success: res => {
								console.log('成功', res)
								if (res.confirm) {
									uni.showLoading({
										mask: true
									})
									circle_member_list_operate({
										type: 3,
										b_id: e.name.b_id
									}).then(res => {
										uni.hideLoading()
										// this.$u.toast('删除成功')
										this.$emit('reload')
									})
								}

							}
						});
					} else if (e.index === 0) {
						//展示
						let Is_it_displayed = e.name.Is_it_displayed === 0 ? 1 : 0
						uni.showLoading({
							mask: true
						})
						circle_member_list_operate({
							type: 5,
							Is_it_displayed,
							b_id: e.name.b_id
						}).then(res => {
							uni.hideLoading()
							// this.$u.toast('删除成功')
							this.$emit('reload')
						})
					}
				} else {
					uni.showModal({
						title: '',
						content: '请确认是否删除？',
						showCancel: true,
						cancelText: '取消',
						confirmText: '确认',
						confirmColor: '#E4393C',
						success: res => {
							console.log('成功', res)
							if (res.confirm) {
								uni.showLoading({
									mask: true
								})
								circle_member_list_operate({
									type: 3,
									b_id: e.name.b_id
								}).then(res => {
									uni.hideLoading()
									// this.$u.toast('删除成功')
									this.$emit('reload')
								})
							}

						}
					});
				}




			},
			confirm(e) {
	
				this.identity = this.selectList[e.detail.value]
				this.show = false
			},
			agree() {
				uni.showLoading({
					mask: true
				})
			
				circle_member_list_operate({
					type: 1,
					identity: this.identity,
					b_id: this.info.apply_for.apply_for.id
				}).then(res => {
					uni.hideLoading()
					this.$u.toast('已同意')
					this.$emit('reload')
				})
			},
			reject() {
				uni.showLoading({
					mask: true
				})
				circle_member_list_operate({
					type: 2,
					b_id: this.info.apply_for.apply_for.id
				}).then(res => {
					uni.hideLoading()
					this.$u.toast('已拒绝')
					this.$emit('reload')
				})
			},
			del() {

			}
		}
	}
</script>

<style lang='scss' scoped>
	.cell {
		padding: 30rpx;
		border-bottom: 1px solid #f5f5f5;

		.text1 {
			font-size: 30rpx;
			font-weight: bold;
		}

		.text2 {
			font-size: 24rpx;
			color: #999;
			margin: 10rpx 0;
		}

		.text3 {
			font-size: 24rpx;
			color: #12B475;

			&>view {
				margin-top: 10rpx;
			}
		}

		.avatar {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50rpx;
			margin-right: 20rpx;
		}

		.intro {
			display: -webkit-box;
			/* 关键属性 */
			-webkit-box-orient: vertical;
			/* 排列方向 */
			-webkit-line-clamp: 2;
			/* 显示行数 */
			overflow: hidden;
			/* 溢出隐藏 */
			text-overflow: ellipsis;
			/* 省略号 */
			word-break: break-word;
			font-size: 24rpx;
			color: #999;
		}
	}

	.message {
		width: 690rpx;
		margin: 0 auto;
		margin-bottom: 30rpx;

		.message-list {
			width: 100%;
			background: #FFFFFF;
			border-radius: 20rpx;
			box-sizing: border-box;
			padding: 19rpx 16rpx;
			margin-bottom: 24rpx;

			.message-list-header {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 50rpx;

				.message-list-header-l {
					display: flex;
					align-items: center;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #2B2B2B;

					image {
						width: 44rpx;
						height: 44rpx;
						margin-right: 6rpx;
					}
				}

				.message-list-header-r {
					display: flex;
					align-items: center;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;

					.text {

						margin-left: 13rpx;
					}

					image {
						width: 28rpx;
						height: 28rpx;
						margin-left: 8rpx;
					}
				}
			}

			.message-list-content {
				display: flex;

				.message-list-content-avatar {
					width: 100rpx;
					height: 100rpx;
					margin-right: 13rpx;
					border-radius: 50%;
				}

				.message-list-content-r {
					display: flex;
					flex: 1;
					min-width: 0;

					.message-list-content-r-tx {
						flex: 1;
						min-width: 0;

						.message-list-content-r-name {
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 30rpx;
							color: #211C1E;
						}

						.message-list-content-r-tx-subTitle {
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #666666;
							margin-bottom: 16rpx;
						}

						.message-list-content-r-tx-address {
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #666666;
							width: 100%;
							margin-right: 10rpx;
						}
					}

					.message-list-content-r-btns {
						min-width: 130rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: center;

						.message-list-content-r-btns-agree {
							min-width: 130rpx;
							height: 55rpx;
							background: #12B475;
							border-radius: 28rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #FFFFFF;
							margin-bottom: 20rpx;
						}

						.message-list-content-r-btns-rej {
							width: 131rpx;
							height: 56rpx;
							border-radius: 28rpx;
							border: 1px solid #C8C8C8;
							display: flex;
							align-items: center;
							justify-content: center;
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #211C1E;
						}
					}
				}
			}

			.message-list-comment {
				height: 170rpx;
				width: 100%;
				position: relative;

				&>image {
					position: absolute;
					top: 0;
					left: 0;
					z-index: 2;
				}

				&>view {
					width: calc(100% - 30rpx);
					position: absolute;
					top: 46rpx;
					left: 15rpx;
					z-index: 3;

					.message-list-comment-item {

						display: flex;
						justify-content: space-between;

						text {
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
						}
					}

					.message-list-comment-r {
						justify-content: unset;
						border-bottom: 1rpx solid #E5E5E5;
						padding-bottom: 18rpx;
						margin-bottom: 18rpx;
					}
				}
			}
		}
	}

	.list {
		width: 100%;

		.list-item {
			width: 100%;
			margin-bottom: 20rpx;
		}
	}

	.painter {
		width: 1280rpx;
		height: 1810rpx;
		position: fixed;
		left: -200%;
	}
</style>